<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 上面的蓝色区域 -->
   <section class="blue">
    <a href="./mine.html" class="ret iconfont icon-shangyiyehoutuifanhui"></a>
    <!-- 我的运动数据 -->
    <div class="hd df jcsb aic">
        <div class="tt">我的运动数据</div>
        <div class="avatar">
            <img  id="ava">
        </div>
    </div>
    <!-- 总运动。本周消耗 -->
    <div class="motion df jcsb">
        <div class="lft">
            <div class="txt">总运动</div>
            <div class="menber">999999 <span class="sp1">分钟</span></div>
        </div>
        <div class="rt1">
            <div class="txt">本周消耗</div>
            <div class="menber kll">999999 <span class="sp1">千卡</span></div>
        </div>
    </div>
    <!-- 消耗 累计 连续 -->
    <div class="data3 df jcsb">
        <!--消耗  -->
        <div class="consumo">
            <div class="co1">消耗(千卡)</div>
            <div class="co2">999999</div>
        </div>
        <!--累计 -->
        <div class="add2">
            <div class="aa1">累计(天)</div>
            <div class="aa2">9999</div>
        </div>
        <!-- 连续 -->
        <div class="continu">
            <div class="nu1">连续(天)</div>
            <div class="nu2">999</div>
        </div>

    </div>

   </section>

   <!-- 中间的柱状图 -->
   <section class="duration">
    <div class="histogram"  id="bar"></div>


   </section>
   <!-- 下面的饼图 -->
   <section class="classification">
    <div class="chat"  id="pie"></div>
   </section>
</body>
</html>